.lg-mr-top-25 {
    margin-top: 25px;
}

.mr-top-2 {
    margin-top: 2px;
}

.sm-mr-top-64 {
    margin-top: 64px;
}

.font-size-20 {
    font-size: 20px;
}

.font-size-24 {
    font-size: 24px;
}

.font-size-32 {
    font-size: 32px;
}

.align-items-center {
    align-items: center;
}

.h-8 {
    height: 8px;
}

.h-12 {
    height: 12px;
}

.h-16 {
    height: 16px;
}

.h-17 {
    height: 17px;
}

.h-20 {
    height: 20px;
}

.h-24 {
    height: 24px;
}

.h-32 {
    height: 32px;
}

.h-40 {
    height: 40px;
}

.h-42 {
    height: 42px;
}

.h-43 {
    height: 43px;
}

.h-91 {
    height: 91px;
}

.w-24 {
    width: 24px;
}

.w-32 {
    width: 32px;
}

.p-l-0 {
    padding-left: 0;
}

.rounded-0 {
    border-radius: 0 !important;
}

.border-bottom-2 {
    border-bottom: 2px solid #EE0033;
}

.display-none {
    display: none !important;
}

.line-clamp-1 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}

.blur-background {
    background: #00000014;
    transition: all 0.3s ease;
}

.object-fit-cover {
    object-fit: cover !important;
}

.object-fit-contain {
    object-fit: contain !important;
}

.bread-crumb li:not(:last-child):after {
    bottom: 4px;
}

.vtf-breadcrumb {
    border-bottom: none !important;
}

.categories-horizontal>ul.parent {
    display: flex;
    gap: 10px;
}

.categories-horizontal>ul.parent>li>a {
    width: 90%;
    text-align: center;
}

.categories-horizontal>ul.parent>li {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 18px;
    height: 40px;
    width: 160px;
    color: #808080;
    background-color: #80808026;
    font-size: 14px;
}

.categories-horizontal>ul.parent>li:hover {
    cursor: pointer;
    background: #FAB0C0;
}

.categories-horizontal>ul.parent>li:first-child {
    width: 69px;
    background: #EE0033;
    color: #ffffff;
}

.categories-horizontal>ul.parent>li:first-child:hover {
    background: #FAB0C0;
}

.categories-horizontal>ul.parent>li:last-child {
    width: 122px;
    position: relative;
}

.categories-horizontal>ul.parent>li:last-child .right,
.categories-horizontal>ul.parent>li:last-child .down {
    transition: all 0.3s ease;
    opacity: 0;
    position: absolute;
    right: 15px;
}

.categories-horizontal>ul.parent>li:last-child .right {
    opacity: 1;
}

.categories-horizontal>ul.parent>li:last-child .down {
    transform: translateY(-20px);
}

.categories-horizontal>ul.parent>li:last-child:hover .down {
    display: block;
    opacity: 1;
    transform: translateY(0);
}

.categories-horizontal>ul.parent>li:last-child:hover .right {
    opacity: 0;
    transform: translateY(20px);
}

.categories-horizontal>ul.parent>li:last-child>a {
    gap: 14px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.categories-horizontal .cushion {
    height: 12px;
    width: 152px;
    top: 40px;
    position: absolute;
}

.categories-horizontal .submenu {
    display: none;
    top: 52px;
    position: absolute;
    right: 0;
    z-index: 1;
    width: 152px;
    height: 224px;
    border-radius: 8px;
    background-color: #FFFFFF;
    box-shadow: 0px 4px 8px 0px #00000029;
}

.categories-horizontal>ul.parent>li:last-child:hover .submenu {
    display: block;
}

.categories-horizontal .submenu>ul>li {
    height: 36px;
    padding: 8px 12px;
    font-size: 14px;
    color: #000000;
    line-height: 20px;
}

.category-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    row-gap: 44px;
    column-gap: 24px;
}

.category-grid .grid-item {
    border-radius: 8px;
    height: 284px;
    width: 221px;
    background-color: #FAFAFA;
}

.category-grid .grid-item .image {
    width: 221px;
    height: 200px;
    position: relative;
}

.category-grid .grid-item .image .play {
    width: 48px;
    height: 48px;
    position: absolute;
    right: 12px;
    bottom: 12px;
    color: #EE0033;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #FDE6EB;
    border-radius: 32px;
    transition: all 0.3s ease;
    opacity: 0;
}

.category-grid .grid-item:hover .image .play {
    opacity: 1;
}

.category-grid .grid-item img {
    object-fit: cover;
    object-position: center;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}

.category-grid .grid-item:hover {
    cursor: pointer;
    box-shadow: 0px 4px 8px 0px #00000029;
}

.category-grid .grid-item .grid-content {
    padding: 8px 12px;
    font-size: 14px;
    font-weight: 600;
    color: #171717;
    line-height: 20px;
    height: 84px;
}

.category-grid .grid-item .grid-content .cate-name {
    font-size: 14px;
    height: 40px;
}

.category-grid .grid-item .grid-content .cate-name:hover {
    color: #EE0033;
}

.category-grid .grid-item .grid-content a {
    font-size: 14px;
}

.category-grid .grid-item .grid-content p {
    font-size: 14px;
    font-weight: 500;
    color: #71717A;
    line-height: 20px;
}

.category-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
}

.category-pagination nav {
    width: 462px;
    display: flex;
    justify-content: center;
}

.category-pagination .pagination {
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.category-pagination .pagination span,
.category-pagination .pagination a {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #000000;
}

.category-pagination .pagination span.current-page {
    background: #EE0033;
    border-radius: 12px;
    color: #ffffff;
}

.podcast-detail {
    position: relative;
    transition: all 0.8s ease;
    font-family: 'Sarabun', sans-serif;
}

#video_section.podcast-detail {
    background: #000
}

.podcast-detail.transcription {
    background: none;
}

.podcast-detail>.row {
    display: flex;
}

.podcast-detail .bread-crumb li h1,
.podcast-detail .bread-crumb li h6 {
    font-weight: 700;
}

.podcast-detail h1,
.podcast-detail h2,
.podcast-detail h3,
.podcast-detail h4,
.podcast-detail h5,
.podcast-detail h6,
.podcast-detail span,
.podcast-detail p,
.podcast-detail a,
.podcast-detail b,
.podcast-detail label {
    font-family: 'Sarabun', sans-serif;
}

.news-credit-editor h6 p {
    color: #000000;
    line-height: 16.41px;
    height: auto !important;
}

.podcast-detail.header-top .title h2 {
    font-size: 32px;
    font-weight: 600;
    line-height: 1.5;
    text-align: left;
    color: #000000;
}

.podcast-detail .post-content .title h1 {
    font-size: 32px;
    font-weight: 600;
    line-height: 1.5;
    text-align: left;
    color: #000000;
}

/* Start: Video Podcast */
.lg-container.md-container.sm-container.podcast-detail {
    background: unset;
}

.podcast-detail.fullscreen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 999999;
    background: #000000;
}

.podcast-detail.fullscreen div.video-container {
    max-height: unset;
}

.podcast-detail #video_content {
    border-radius: unset;
    transition: all 0.8s ease;
}

.podcast-detail#video_section {
    display: flex;
}

.podcast-detail .side-video-container {
    width: 756px;
    height: 425px;
}

.podcast-detail .audio-container,
.podcast-detail .video-container {
    position: relative;
    width: 100%;
    max-height: 772px;
}

.podcast-detail .audio-container:hover,
.podcast-detail .video-container:hover,
.podcast-detail .side-video-container:hover {
    cursor: pointer;
}

.podcast-detail .audio-container>svg,
.podcast-detail .video-container>svg {
    position: absolute;
    top: 20px;
    left: 20px;
}

.podcast-detail .video-container img,
.podcast-detail .audio-container img {
    border-radius: 16px;
}

.podcast-detail .video-container img,
.podcast-detail .audio-container img,
.podcast-detail .video-container video {
    width: 100%;
    /* height: 100%; Cố định kích thước ảnh để không bị tràn xuống */
    /* height: 100%; */

    /* height: auto; Fix safari*/
    height: auto;
    max-height: 100%;
    object-fit: contain;
}

.podcast-detail .video-container img {
    position: absolute;
    object-fit: cover;
}

.podcast-detail .audio-container img {
    height: auto;
    background: none;
    max-height: 722px;
    object-fit: cover;
    margin-bottom: 0;
}

.podcast-detail .video-container:fullscreen {
    background: black;
    width: 100vw;
    height: 100vh;
}

.podcast-detail .video-container:fullscreen video {
    height: 100%;
    width: 100%;
}

.podcast-detail .fast-forward,
.podcast-detail .fast-backward {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    align-items: center;
    display: flex;
    justify-content: center;
    flex-direction: column;
    width: 140px;
    height: 425px;
    padding: 12px 16px;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    text-align: left;
    color: #FFFFFF;
    opacity: 0;
    z-index: 20;
    transition: opacity 0.3s ease-in;
}

.podcast-detail .fast-forward:hover,
.podcast-detail .fast-backward:hover {
    cursor: pointer;
    opacity: 1;
}

.podcast-detail .fast-forward {
    right: 0;
    border-radius: 80px 32px 32px 80px;
}



.podcast-detail .fast-backward {
    border-radius: 32px 80px 80px 32px;
}

.podcast-detail .video-control.fullscreen {
    left: 0;
    right: 0;
    z-index: 9999;
}

.podcast-detail .play-audio-or-video {
    display: flex;
    gap: 16px;
}

.podcast-detail .play-audio-or-video button {
    min-width: 140px;
    height: 48px;
    padding: 12px 16px;
    gap: 6px;
    border-radius: 32px;
    background: #00000048;
    color: #ffffff;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    text-align: left;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 98;
}

.podcast-detail .play-audio-or-video button:hover {
    cursor: pointer;
    background: #000000;
}

.podcast-detail .audio-container .audio-control,
.podcast-detail .video-container .video-control {
    position: absolute;
    height: 96px;
    bottom: 0;
    padding: 20px;
    width: 100%;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 57.89%);
    border-radius: unset;
    z-index: 99;
}

.podcast-detail .audio-container .audio-control {
    left: 1px;
}

.podcast-detail .top-control {
    position: absolute;
    top: 12px;
    right: 12px;
    display: flex;
    align-items: center;
    gap: 12px;
    z-index: 99;
}

.lg-container.md-container.podcast-detail .audio-container .audio-control,
.lg-container.md-container.podcast-detail .video-container .video-control {
    border-bottom-left-radius: 16px;
    border-bottom-right-radius: 16px;
}

.podcast-detail .play-audio-or-video,
.podcast-detail .audio-container .control-center,
.podcast-detail .video-container .control-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 30;
}

.podcast-detail .audio-container .control-center .play-center-wrapper button,
.podcast-detail .video-container .control-center .play-center-wrapper button {
    width: 48px;
    height: 48px;
    padding: 4px;
    border-radius: 32px;
    background: #FAB0C0;
    border: 3px solid #FAB0C0
}

.podcast-detail .side-video-container {
    width: 756px;
    height: 425px;
}

.podcast-detail .side-video-container .fast-forward,
.podcast-detail .side-video-container .fast-backward {
    top: 50%;
    height: 225px;
    transform: translateY(-50%);
}

.podcast-detail .audio-control .time_wrapper,
.podcast-detail .video-control .time_wrapper {
    position: relative;
    width: 100%;
}

.podcast-detail .audio-control .time-progress,
.podcast-detail .video-control .time-progress {
    position: absolute;
    width: 100%;
    height: 4px;
    border-radius: 8px;
    transition: all 0.1s linear;
    background: rgba(255, 255, 255, .2);
}

.podcast-detail .audio-control .time-progress:hover,
.podcast-detail .video-control .time-progress:hover {
    height: 9px;
    transform: translateY(-3px);
    -ms-transform: translateY(-3px);
}

.podcast-detail .audio-control .time-slider,
.podcast-detail .video-control .time-slider {
    width: 0;
    background: #FF0033;
    height: 100%;
    border-radius: 8px;
    transition: width 0.1s linear;
}

.podcast-detail .control-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center
}

.podcast-detail .control-wrapper .control-left,
.podcast-detail .control-wrapper .control-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

.podcast-detail .top-control button,
.podcast-detail .control-wrapper button {
    background: none;
    border: none;
    width: 24px;
    height: 24px;
}

.podcast-detail .control-wrapper .volume-cushion {
    position: absolute;
    width: 48px;
    height: 60px;
    bottom: 28px;
    left: -6px;
    background: none;
}

.podcast-detail .top-control button,
.podcast-detail .control-wrapper .control-right button {
    width: 36px;
    height: 36px;
}

.podcast-detail .control-wrapper .time-wrapper {
    font-size: 14px;
    font-weight: 400;
    color: #FFFFFF;
    line-height: 22px;
}

.podcast-detail .transcript-section {
    width: 412px;
    height: 425px;
    min-width: 412px;
}

div.post-content.audio .xlg-d-none {
    display: none;
}

.podcast-detail .video-transcription-container {
    width: 100%;
    padding: 16px;
    gap: 20px;
    border-radius: 16px;
    background: #FAFAFA;
    backdrop-filter: blur(8.170000076293945px);
}

.podcast-detail .video-transcription-container .transcript-wrapper {
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 3px;
}

::-webkit-scrollbar {
    width: 5px;
}

::-webkit-scrollbar-thumb {
    background: #D4D4D4;
    border-radius: 5px;
}

.podcast-detail .video-transcription-container .head {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.podcast-detail .video-transcription-container .head h5 {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 20px;
    font-weight: 600;
    line-height: 28px;
    text-align: left;
}

.podcast-detail .video-transcription-container .head h5 .line {
    width: 8px;
    display: block;
    background: #EE0033;
    height: 23px;
}

.podcast-detail .video-transcription-container ul {
    height: 348px;
    gap: 12px;
    display: flex;
    flex-direction: column;
}

.podcast-detail .video-transcription-container ul li {
    width: 100%;
    padding: 8px 12px;
    gap: 12px;
    border-radius: 12px;
    display: flex;
    background: #F5F5F5;
    position: relative;
}

.podcast-detail .video-transcription-container ul li:hover {
    background: #FDE6EB;
}

.podcast-detail .video-transcription-container ul li svg {
    display: none;
}

.podcast-detail .video-transcription-container ul li:hover svg {
    display: block;
}

.podcast-detail .video-transcription-container ul li:hover .time {
    background: #FFFFFF;
}

.podcast-detail .video-transcription-container ul li .time {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background: #FFFFFF;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #FDE6EB;
    color: #EE0033;
}

.podcast-detail .video-transcription-container ul li .text {
    width: 304px;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    text-align: left;
    color: #171717;
}

/* CSS for transcript under video */
.xlg-d-none.podcast-detail .video-transcription-container ul li .text {
    width: 100%;
}

/* End: CSS for transcript under video */

.podcast-detail .video-transcription-container ul li svg {
    position: absolute;
    top: 8px;
    right: 8px;
}

.podcast-detail .video-transcription-container ul li.active {
    background: #FDE6EB;
}

.podcast-detail .video-transcription-container ul li.active .time {
    background: #FFFFFF;
}

.podcast-detail .audio-container .vibe {
    width: 564;
    height: 131px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* End: Video, Audio Podcast */
.podcast-detail .post-content .podcast-content {
    font-size: 16px;
    font-weight: 400;
    line-height: 20px;
    text-align: left;
    color: #000000;
}

.podcast-detail .podcast-content p,
.podcast-detail .podcast-content div,
.podcast-detail .post-content .podcast-content p,
.podcast-detail .post-content .podcast-content div {
    font-size: 16px;
    margin-bottom: 20px;
    color: #000000;
    line-height: 30px;
}

.podcast-detail .post-content .podcast-content ul {
    list-style: disc
}

.poll-container .list-group-item {
    margin-left: 0 !important;
}

.podcast-detail .post-content .podcast-content li {
    margin-left: 40px;
}

.podcast-detail .post-content .description {
    font-weight: bold;
    font-size: 17px;
    text-align: left;
    color: #3d3939;
    line-height: 1.6rem;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    max-height: 8.2rem;
}

.podcast-detail .post-content blockquote {
    border-left-color: #f1962b;
    font-style: italic;
}

.podcast-detail .post-content blockquote div {
    margin-bottom: 20px;
    color: #000000;
    line-height: 30px;
    font-size: 18px !important;
}

.podcast-detail .post-content blockquote p {
    margin-bottom: 20px;
    color: #000000;
    line-height: 30px;
    font-size: 18px !important;
}

.podcast-detail .post-content .description-no-media {
    font-weight: bold;
    font-size: 17px;
    color: #3d3939;
}

.podcast-detail .posts-related,
.podcast-detail .post-audio-main-content,
.podcast-detail .post-video-main-content {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.podcast-detail .posts-related {
    width: 100%;
}

.podcast-detail .posts-related .post-container,
.podcast-detail .post-audio-main-content .segment,
.podcast-detail .post-video-main-content .segment {
    display: flex;
    height: 72px;
    padding: 12px 16px;
    gap: 12px;
    border-radius: 12px;
    background-color: #F5F5F5;
    align-items: center;
    /* justify-content: center; */
}

.podcast-detail .segment .timer {
    width: 40px;
    height: 40px;
    background-color: #FDE6EB;
    color: #EE0033;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
}

.podcast-detail .segment .content {
    width: 100%;
    height: 48px;
    margin: 0 !important;
    display: flex;
    align-items: center;
    font-size: 16px;
    font-weight: 600;
    line-height: 20px;
    text-align: left;
    color: #171717;
}

.podcast-detail .segment .play {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #FAB0C0;
    border-radius: 32px;
    border: none;
}

.podcast-detail .posts-related .post-container {
    height: 100px;
    justify-content: start;
    align-items: start;
}

.podcast-detail .posts-related .post-container .content span:hover {
    color: #EE0033;
}

.podcast-detail .post-container .image {
    flex-shrink: 0;
}

.podcast-detail .post-container img {
    width: 62px;
    height: 62px;
    border-radius: 8px;
    object-fit: cover;
    object-position: center;
}

.podcast-detail .post-container .content {
    margin: 0;
    height: 76px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.podcast-detail .post-container .content .name {
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    text-align: left;
    color: #171717;
}

.podcast-detail .other-container {
    margin-top: 32px;
    display: flex;
    width: 100%;
    gap: 32px;
}

.podcast-detail.has-no-media .other-container .other-right {
    width: 32%;
    display: flex;
    justify-content: center;
}

.podcast-detail .other-container .other-left {
    width: 72%;
}

.podcast-detail.has-no-media .other-container .other-left {
    width: 65%;
}

.podcast-detail .podcast-sidebar-post {
    margin-top: 13px;
}

.podcast-detail .other-container .other-left .col-xs-12 .list-info {
    margin: 0;
}

.podcast-detail .other-left .other-posts {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.podcast-detail .other-container .post-container {
    display: flex;
    gap: 12px;
    position: relative;
    height: 120px;
}

.podcast-detail .other-container .post-container a {
    display: flex;
    gap: 12px;
    position: relative;
    height: 120px;
}

.podcast-detail .other-container .post-container .play {
    position: absolute;
    bottom: 0;
    right: 0;
    min-width: 90px;
    height: 28px;
    padding: 4px 4px 4px 8px;
    display: flex;
    align-items: center;
    background: #FAB0C0;
    border-radius: 32px;
    border: none;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    text-align: right;
    color: #525252;
}

.podcast-detail .other-container .post-container .play .time-duration {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: space-between;
}

.podcast-detail .other-container img {
    width: 170px;
    height: 170px;
    border-radius: 8px;
    object-fit: cover;
    object-position: center;
}

.podcast-detail .other-container .other-left img {
    width: 120px;
    height: 120px;
    max-width: unset;
}

.podcast-detail .other-container .post-container .content {
    height: 100;
}

.podcast-detail .other-container .post-container .content .name {
    min-height: 48px;
    font-weight: 600;
}

.podcast-detail .other-container .post-container .content .name span:hover {
    color: #EE0033;
}

.podcast-detail .other-container .post-container .content .description {
    min-height: 40px;
    font-weight: 500;
    text-align: justify;
    font-size: 14px;
    color: #71717A;
    line-height: 1.3rem;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    max-height: 3.2rem;
}

.podcast-detail .other-container .post-container .content ._view {
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    height: 20px;
}

.podcast-detail .other-container .other-right-container {
    background-color: #F7F7F7;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 17.68px;
    width: 300px;
    height: 293px;
    padding: 0 23px 20.68px 23px;
    border-radius: 8px;
}

.podcast-detail .other-container .other-right-container .qr-content {
    font-size: 14px;
    font-weight: 400;
    line-height: 22.4px;
    text-align: center;
    height: 45px;
    width: 254px;
    color: #626262;
    z-index: 30;
}

.podcast-detail .other-container .other-right-container .choice-qr {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    height: 39px;
    font-size: 20px;
    font-weight: 600;
    color: #E5E5E5;
    padding-top: 32px;
}

.podcast-detail .other-container .other-right-container .choice-qr span:hover {
    cursor: pointer;
}

.podcast-detail .other-container .other-right-container .choice-qr .qr-active {
    color: #EE0033;
}

.podcast-detail .control-wrapper input[type=range],
.podcast-detail .top-control input[type=range] {
    -webkit-appearance: none !important;
}

.podcast-detail .control-wrapper input[type=range],
.podcast-detail .top-control input[type=range] {
    writing-mode: vertical-lr;
    direction: rtl;
    writing-mode: vertical-lr;
    direction: rtl;
    vertical-align: bottom;
    height: 100%;
    accent-color: #FFFFFF;
    background-color: #808080;
    background: linear-gradient(to top, #EE0033 0%, #EE0033 50%, #808080 50%, #808080 100%);
    width: 4px;
    border-radius: 2px;
}

.podcast-detail .control-wrapper input[type=range]::-moz-range-progress,
.podcast-detail .top-control input[type=range]::-moz-range-progress {
    background: red;
}

.podcast-detail .control-wrapper input[type=range]:focus,
.podcast-detail .top-control input[type=range]:focus {
    border: none !important;
    box-shadow: none !important;
}

.podcast-detail .control-wrapper #btn_subtitle,
.podcast-detail .control-wrapper #btn_volume,
.podcast-detail .top-control button,
.podcast-detail .control-wrapper #btn_audio_volume,
.podcast-detail .control-wrapper #btn_audio_speed,
.podcast-detail .control-wrapper #btn_speed {
    position: relative;
}

.podcast-detail .top-control .subtitle-option-wrapper,
.podcast-detail .top-control .speed-option-wrapper,
.podcast-detail .control-wrapper .subtitle-option-wrapper,
.podcast-detail .top-control .media-volume,
.podcast-detail .control-wrapper .media-volume,
.podcast-detail .control-wrapper .speed-option-wrapper {
    position: absolute;
    bottom: 60px;
    background-color: #000000;
    border-radius: 8px;
    width: 155px;
    left: -5px;
}

.podcast-detail .top-control .speed-option-wrapper,
.podcast-detail .top-control .subtitle-option-wrapper {
    bottom: 0px;
    top: 45px;
    background-color: unset;
    left: -60px;
}

.podcast-detail .top-control .speed-option-wrapper>ul,
.podcast-detail .top-control .subtitle-option-wrapper>ul {
    background-color: #000000;
    border-radius: 8px;
}

.podcast-detail .top-control .media-volume,
.podcast-detail .control-wrapper .media-volume {
    width: 48px;
    height: 100px;
    padding: 16px;
    border-radius: 8px;
    background: #000000;
    left: -6px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.podcast-detail .top-control .media-volume {
    bottom: 0px;
    top: 45px;
}

.podcast-detail .top-control .subtitle-option-wrapper li,
.podcast-detail .control-wrapper .subtitle-option-wrapper li,
.podcast-detail .top-control .speed-option-wrapper li,
.podcast-detail .control-wrapper .speed-option-wrapper li {
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    text-align: left;
    color: #FFFFFF;
    padding: 12px 20px;
    position: relative;
}

.podcast-detail .side-video-container .control-wrapper .speed-option-wrapper li {
    padding: 6px 8px;
}

.podcast-detail .top-control .speed-option-wrapper li.active,
.podcast-detail .control-wrapper .speed-option-wrapper li.active,
.podcast-detail .top-control .subtitle-option-wrapper li.active,
.podcast-detail .control-wrapper .subtitle-option-wrapper li.active,
.podcast-detail .control-wrapper .speed-option-wrapper li:hover,
.podcast-detail .top-control .subtitle-option-wrapper li:hover,
.podcast-detail .top-control .speed-option-wrapper li:hover,
.podcast-detail .control-wrapper .subtitle-option-wrapper li:hover {
    background-color: #141414;
}

.podcast-detail .control-wrapper .speed-option-wrapper li:first-child,
.podcast-detail .top-control .speed-option-wrapper li:first-child,
.podcast-detail .top-control .subtitle-option-wrapper li:first-child,
.podcast-detail .control-wrapper .subtitle-option-wrapper li:first-child,
.podcast-detail .control-wrapper .speed-option-wrapper li:first-child:hover,
.podcast-detail .top-control .speed-option-wrapper li:first-child:hover,
.podcast-detail .top-control .subtitle-option-wrapper li:first-child:hover,
.podcast-detail .control-wrapper .subtitle-option-wrapper li:first-child:hover {
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}

.podcast-detail .control-wrapper .speed-option-wrapper li:last-child,
.podcast-detail .top-control .speed-option-wrapper li:last-child,
.podcast-detail .top-control .subtitle-option-wrapper li:last-child,
.podcast-detail .control-wrapper .subtitle-option-wrapper li:last-child,
.podcast-detail .control-wrapper .speed-option-wrapper li:last-child:hover,
.podcast-detail .top-control .speed-option-wrapper li:last-child:hover,
.podcast-detail .top-control .subtitle-option-wrapper li:last-child:hover,
.podcast-detail .control-wrapper .subtitle-option-wrapper li:last-child:hover {
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
}

.podcast-detail .top-control .speed-option-wrapper li svg,
.podcast-detail .top-control .subtitle-option-wrapper li svg,
.podcast-detail .control-wrapper .subtitle-option-wrapper li svg,
.podcast-detail .control-wrapper .speed-option-wrapper li svg {
    display: none;
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
}

.podcast-detail .top-control .speed-option-wrapper li.active svg,
.podcast-detail .top-control .subtitle-option-wrapper li.active svg,
.podcast-detail .control-wrapper .subtitle-option-wrapper li.active svg,
.podcast-detail .control-wrapper .speed-option-wrapper li.active svg {
    display: block;
}

.title.search-podcast-title {
    display: flex;
    justify-content: space-between;
}

#search-podcast {
    width: 338px;
}

#search-podcast #search-form {
    position: relative;
}

#search-podcast #search-form svg {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #6D7F8C;
}

#search-podcast #search-content {
    width: 100%;
    height: 44px;
    border-radius: 10px;
    background: #FFFFFF;
    border: 1px solid #DBE0E3;
    box-shadow: none;
    font-family: Roboto;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    text-align: left;
    color: #555;
    margin: 0;
    padding: 0 0 0 42px !important;
}

#search-podcast #search-content:focus {
    box-shadow: none !important;
}

video::cue {
    background-color: rgba(0, 0, 0, 0.8);
    /* Nền đen mờ */
    color: white;
    /* Chữ trắng */
    font-size: 24px;
    /* Cỡ chữ */
    font-family: Arial, sans-serif;
    /* Font chữ */
    text-align: center;
    /* Căn giữa */
    line-height: 1.4;
    /* Khoảng cách dòng */
    padding: 5px 10px;
    /* Khoảng cách trong nền */
    border-radius: 5px;
    /* Bo góc nền */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
    /* Hiệu ứng bóng chữ */
    white-space: pre-wrap;
    /* Xuống dòng tự động */
}

video::-webkit-media-controls {
    display: none !important;
}

video::-webkit-media-controls-overlay-play-button {
    display: none !important;
}

.info-background-gr {
    background-color: transparent !important;
    word-break: break-word;
}

@media only screen and (min-width: 1280px) {
    .lg-container {
        padding: 0 !important;
    }
}

/* Desktop screen >= 1200px */
@media only screen and (min-width: 1200px) {
    .xlg-d-none {
        display: none !important;
    }

    .lg-container {
        padding: 0 32px;
        width: 1200px;
        margin-right: auto;
        margin-left: auto;
    }
}

/* Desktop screen >= 1200px */
@media only screen and (min-width: 1200px) and (max-width: 1280px) {
    .podcast-detail .side-video-container {
        height: 100%;
    }

    .podcast-detail .transcript-section {
        height: 100%;
    }

    .podcast-detail .video-transcription-container ul {
        height: 310px;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {

    .podcast-detail>.w-32,
    .podcast-detail .transcript-section {
        display: none;
    }

    .podcast-detail .side-video-container {
        width: 100%;
        height: 100%;
    }

    .podcast-detail .video-transcription-container ul li .text {
        width: 92%;
    }
}

/* Desktop screen >= 992px */
@media only screen and (min-width: 992px) {
    .lg-d-none {
        display: none !important;
    }

    .lg-container {
        padding: 0 32px 0 32px;
    }

    .lg-pd-right-23 {
        padding-right: 23px;
    }

    .lg-container.md-container.podcast-detail #video_content {
        border-radius: 16px;
    }


    .podcast-detail .video-blur {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        transition: all 0.3s ease;
        border-radius: 16px;
        z-index: 10;
    }

    .podcast-detail #video_container:hover .video-blur {
        background: rgba(0, 0, 0, 0.2);
    }

    .sm-container.podcast-detail#video_section {
        background: #000000;
    }

    .lg-container.md-container.sm-container.podcast-detail#video_section {
        background: none;
    }

    .lg-container.md-container.podcast-detail #video_content {
        border-radius: 16px;
    }

    .lg-container.md-container.podcast-detail .audio-container .audio-control,
    .lg-container.md-container.podcast-detail .video-container .video-control {
        border-bottom-left-radius: 16px;
        border-bottom-right-radius: 16px;
    }
}

/* Tab screen between 768px to 991px */
@media only screen and (min-width: 769px) and (max-width: 991px) {
    .md-d-none {
        display: none !important;
    }

    .md-mr-top-25 {
        margin-top: 25px;
    }

    .md-container {
        padding: 0 32px 0 32px;
    }

    .md-container .side-video-container {
        width: 100%;
        height: 100%;
    }

    .podcast-detail .fast-forward,
    .podcast-detail .fast-backward {
        height: 250px;
    }

    .podcast-detail .audio-container img {
        height: unset;
    }

    .podcast-detail .post-content .title h1 {
        font-size: 32px;
        font-weight: 600;
        line-height: 1.5;
        text-align: left;
        color: #000000;
    }

    .podcast-detail .video-transcription-container ul li .text {
        width: 88%;
    }

    .podcast-detail .control-wrapper .speed-option-wrapper li {
        padding: 8px 12px;
    }

    .podcast-detail>.row {
        display: block;
    }
}

/* Small Tab screen < 768px */
@media only screen and (max-width: 768px) {
    .sm-d-none {
        display: none;
    }

    .sm-container {
        padding: 0 16px 0 16px;
    }

    .sm-mr-top-36 {
        margin-top: 36px;
    }

    .sm-font-size-24 {
        font-size: 24px;
    }

    .bread-crumb li.big-item.sm-pd-top-22 {
        padding-top: 22px;
    }

    .sm-only-2-lines {
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }

    .title.search-podcast-title {
        flex-direction: column;
        gap: 24px;
    }

    #search-podcast {
        width: unset;
    }

    .category-grid .grid-item {
        width: 100%;
        height: 277px
    }

    .category-grid .grid-item .image {
        width: 100%;
        max-height: 193px;
    }

    .category-grid .grid-item .grid-content .cate-name {
        font-size: 14px;
        font-weight: 600;
        line-height: 20px;
        text-align: left;
    }

    .podcast-detail .video-container,
    .podcast-detail .side-video-container {
        height: unset;
    }

    .podcast-detail>.row {
        display: block;
    }

    .podcast-detail .audio-container .audio-control,
    .podcast-detail .video-container .video-control {
        height: unset;
        padding: 12px;
    }

    .category-grid .grid-item img {
        max-height: 193px;
    }

    .podcast-detail.header-top {
        margin-top: 32px;
    }

    .podcast-detail .top-control .speed-option-wrapper li {
        padding: 6px 8px;
    }

    .podcast-detail .top-control .speed-option-wrapper li.active::after {
        top: 8px;
    }

    .podcast-detail .fast-forward,
    .podcast-detail .fast-backward {
        height: 225px;
    }

    .podcast-detail .audio-container img {
        height: unset;
    }

    .podcast-detail .audio-container .vibe {
        width: 281px;
        height: 65px;
    }

    .podcast-detail .post-content .title h1 {
        font-size: 32px;
        font-weight: 600;
        line-height: 1.5;
        text-align: left;
        color: #000000;
    }

    .podcast-detail .posts-related .title h3 {
        font-size: 20px;
        font-weight: 600;
        line-height: 28px;
        text-align: left;
        color: #000000;
    }

    .podcast-detail .segment .play {
        width: 38px;
        height: 38px;
    }

    .podcast-detail .segment .timer {
        padding: 5px
    }

    .podcast-detail .other-container {
        flex-direction: column;
    }

    .podcast-detail .other-container .other-right,
    .podcast-detail.has-no-media .other-container .other-right,
    .podcast-detail.has-no-media .other-container .other-left,
    .podcast-detail .other-container .other-left {
        width: 100%;
    }

    .podcast-detail .other-container .post-container {
        gap: 12px;
    }

    .podcast-detail .other-container .other-right {
        display: flex;
        justify-content: center;
    }

    .podcast-detail [id^="btn_volume"] {
        /*display: none;*/
    }

    /* CSS Ckeditor */
    .podcast-detail .post-content .podcast-content div.modal.fade.in {
        margin-top: 50% !important;
    }

    /* End: CSS Ckeditor */

    video::cue {
        background-color: rgba(0, 0, 0, 0.8);
        /* Nền đen mờ */
        color: white;
        /* Chữ trắng */
        font-size: 14px;
        /* Cỡ chữ */
        font-family: Arial, sans-serif;
        /* Font chữ */
        text-align: center;
        /* Căn giữa */
        line-height: 1.4;
        /* Khoảng cách dòng */
        padding: 5px 10px;
        /* Khoảng cách trong nền */
        border-radius: 5px;
        /* Bo góc nền */
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
        /* Hiệu ứng bóng chữ */
        white-space: pre-wrap;
        /* Xuống dòng tự động */
    }

    .podcast-detail .video-transcription-container ul li .text {
        width: 88%;
    }
}

@media only screen and (width: 768px) {
    .bread-crumb li.big-item.sm-pd-top-22 {
        margin-top: 12px;
    }

    .podcast-categories {
        margin-top: 67px;
    }
}

@media only screen and (min-width: 554px) and (max-width: 768px) {
    .first-content {
        margin-top: 22px;
    }

    .sm-mr-top-44 {
        margin-top: 44px;
    }

    .podcast-categories {
        margin-top: 57px;
    }
}

@media only screen and (max-width: 554px) {
    .podcast-categories {
        margin-top: 47px;
    }
}

/* Mobile screen < 450px */
@media only screen and (max-width: 450px) {
    /* Sử dụng video height auto nên không dùng tỉ lệ */
    /* .podcast-detail#video_section {
        aspect-ratio: 16 / 9;
    } */

    .lg-container.md-container.sm-container.podcast-detail .video-container video {
        object-fit: fill;
    }

    .podcast-detail .post-content .title h1 {
        font-size: 20px;
        font-weight: 600;
        line-height: 24px;
        text-align: left;
        color: #000000;
    }

    /* CSS Ckeditor */
    article.ck-cms-wiki-quote.wiki-float-right,
    article.ck-cms-wiki-quote.wiki-float-left,
    article.ck-cms-wiki-quote.wiki-float-center {
        width: 85%;
    }

    /* End: CSS Ckeditor */

    .podcast-detail .audio-container>svg,
    .podcast-detail .video-container>svg {
        width: 77px;
        height: 40px;
    }
}

@media only screen and (min-width: 375px) and (max-width: 395px) {
    .first-content {
        margin-top: 47px;
    }
}

@media only screen and (max-width: 365px) {
    .podcast-detail .other-container .other-left img {
        width: 100px;
        height: 100px;
    }

    .podcast-detail .other-container .post-container {
        height: 110px;
        align-items: flex-start;
        justify-content: flex-start;
        flex-wrap: nowrap;
        flex-direction: row;
    }

    .podcast-detail .other-container .post-container .content {
        height: unset;
        gap: 2px;
        flex-wrap: nowrap;
    }

    .podcast-detail .other-container .post-container .content .name {
        font-size: 12px;
        line-height: 22px;
    }

    .podcast-detail .other-container .post-container .content .description {
        font-size: 12px;
        line-height: 1.2rem;
        max-height: 2rem;
    }

    .podcast-detail .other-container .post-container .content .list-info li {
        margin-right: 8px;
    }

    .podcast-detail .other-container .post-container .content .cache-html {
        height: 23px;
    }

    .podcast-detail .other-container .post-container .play {
        font-size: 12px;
        padding: 2px 4px 3px 8px;
        height: unset;
        min-width: unset;
        bottom: -8px;
    }

    .podcast-detail .other-container .post-container .play .time-duration {
        display: flex;
        gap: 6px;
        align-items: center;
        justify-content: space-between;
    }

    .podcast-detail .other-container .post-container .play .time-duration svg {
        width: 11px !important;
    }
}

/* Extra small screen */
@media only screen and (max-width: 320px) {
    .login-item span {
        padding-right: 40px;
    }
}

/* Categories reponsive */
@media only screen and (max-width: 450px) {
    .category-grid {
        grid-template-columns: repeat(1, 1fr);
    }
}

@media only screen and (min-width: 451px) and (max-width: 767px) {
    .category-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media only screen and (min-width: 768px) and (max-width: 965px) {
    .category-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media only screen and (min-width: 768px) and (max-width: 965px) {
    .category-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media only screen and (min-width: 965px) and (max-width: 991px) {
    .category-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* Start: Loading */
@keyframes ldio-x2uulkbinbj {
    0% {
        opacity: 1
    }

    100% {
        opacity: 0
    }
}

.ldio-x2uulkbinbj div {
    left: 27px;
    position: absolute;
    animation: ldio-x2uulkbinbj linear 1s infinite;
    background: #fe718d;
    width: 7px;
    height: 23px;
    border-radius: 7px / 22px;
    transform-origin: 7px 32px;
}

.ldio-x2uulkbinbj div:nth-child(1) {
    transform: rotate(0deg);
    animation-delay: -0.8571428571428571s;
    background: #fe718d;
}

.ldio-x2uulkbinbj div:nth-child(2) {
    transform: rotate(51.42857142857143deg);
    animation-delay: -0.7142857142857143s;
    background: #fe718d;
}

.ldio-x2uulkbinbj div:nth-child(3) {
    transform: rotate(102.85714285714286deg);
    animation-delay: -0.5714285714285714s;
    background: #fe718d;
}

.ldio-x2uulkbinbj div:nth-child(4) {
    transform: rotate(154.28571428571428deg);
    animation-delay: -0.42857142857142855s;
    background: #fe718d;
}

.ldio-x2uulkbinbj div:nth-child(5) {
    transform: rotate(205.71428571428572deg);
    animation-delay: -0.2857142857142857s;
    background: #fe718d;
}

.ldio-x2uulkbinbj div:nth-child(6) {
    transform: rotate(257.14285714285717deg);
    animation-delay: -0.14285714285714285s;
    background: #fe718d;
}

.ldio-x2uulkbinbj div:nth-child(7) {
    transform: rotate(308.57142857142856deg);
    animation-delay: 0s;
    background: #fe718d;
}

.loadingio-spinner-spinner-nq4q5u6dq7r {
    width: 68px;
    height: 68px;
    display: inline-block;
    overflow: hidden;
    background: none;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.ldio-x2uulkbinbj {
    width: 100%;
    height: 100%;
    position: relative;
    transform: translateZ(0) scale(1);
    backface-visibility: hidden;
    transform-origin: 0 0;
    /* see note above */
}

.ldio-x2uulkbinbj div {
    box-sizing: content-box;
}

/* End: Loading */

/* Chỉnh sửa qr bài viết liên quan */

.podcast-detail .podcast-sidebar-post .other-container {
    margin-top: 32px;
    display: flex;
    width: 100%;
    gap: 32px;
    justify-content: center;
}

.podcast-detail .podcast-sidebar-post .other-container .other-right {
    width: 32%;
    display: flex;
    justify-content: center;
}

.podcast-detail .podcast-sidebar-post .other-container .other-right-container {
    background-color: #F7F7F7;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 17.68px;
    width: 300px;
    height: 293px;
    padding: 0 23px 20.68px 23px;
    border-radius: 8px;
}

.podcast-detail .podcast-sidebar-post .other-container .other-right-container .qr-content {
    font-size: 14px;
    font-weight: 400;
    line-height: 22.4px;
    text-align: center;
    height: 45px;
    width: 254px;
    color: #626262;
    z-index: 30;
}

.podcast-detail .podcast-sidebar-post .other-container .other-right-container .choice-qr {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    height: 39px;
    font-size: 20px;
    font-weight: 600;
    color: #E5E5E5;
    padding-top: 32px;
}

.podcast-detail .podcast-sidebar-post .other-container .other-right-container .choice-qr span:hover {
    cursor: pointer;
}

.podcast-detail .podcast-sidebar-post .other-container .other-right-container .choice-qr .qr-active {
    color: #EE0033;
}